<template>
  <div class="mb-vfp-setmeal">
    <!-- 导航条 -->
    <div class="mb_nav_barbox">
      <van-nav-bar left-arrow @click-left="onClickLeft" title="我的套餐" @click-right="onClickRight">
        <template #right>
          <van-icon name="weapp-nav" size="24" />
        </template>
      </van-nav-bar>
    </div>
    <!-- ./ 导航条 end here-->

    <!-- 我的套餐 -->
    <div class="mt_setmeal_box">
      <p class="tel_num">尊敬的<span>136 **** 1544</span>客户</p>
      <div class="setmeal_box">
        <div class="title">
          <div class="left"><i></i><span>我的套餐</span></div>
          <div class="right"><span>套餐费：</span><span>99</span><span>元/月</span></div>
        </div>
        <van-divider />
        <div class="combo">
          <div class="left">
            <h6>全球通5G全家享套餐99元A档</h6>
            <van-tag type="primary">2022版</van-tag>
          </div>
          <div class="right"><span class="txt">查看详情</span><van-icon name="arrow" size="12" /></div>
        </div>
        <div class="infobox">
          <ul>
            <li>
              <div class="innerbox">
                <h5><i class="iconfont icon-signal-fill"></i><span>流量</span></h5>
                <p class="meter"><span>国内：</span><span>30</span><span>GB</span></p>
                <van-button type="primary" size="mini" round>&emsp;查流量&emsp;</van-button>
              </div>
            </li>
            <li>
              <div class="innerbox">
                <h5><i class="iconfont icon-tonghua"></i><span>通话</span></h5>
                <p class="meter"><span>国内：</span><span>300</span><span>分钟</span></p>
                <van-button type="primary" size="mini" round>&emsp;查余量&emsp;</van-button>
              </div>
            </li>
            <li>
              <div class="innerbox">
                <h5><i class="iconfont icon-kuandai1"></i><span>宽带</span></h5>
                <p class="meter"><span>国内：</span><span>30</span><span>GB</span></p>
              </div>
            </li>
            <li>
              <div class="innerbox">
                <h5><i class="iconfont icon-SDkaneicunka"></i><span>副卡</span></h5>
                <p class="meter" style="color: var(--van-blue);"><span></span><span>2</span><span>张</span><van-badge
                    content="免月费" /></p>
                <p class="tips">每月送20GB流量</p>
                <van-button type="primary" size="mini" round style="margin-top: 8px;">&emsp;去办卡&emsp;</van-button>
              </div>
            </li>
            <li>
              <div class="innerbox">
                <h5><span>全球通权益</span></h5>
                <p class="meter" style="color: var(--van-blue);margin-top: 26px;">
                  <span></span><span>银卡</span><span></span><i class="iconfont icon-gengduo2"></i>
                </p>
              </div>
            </li>
            <li>
              <div class="innerbox">
                <h5><span>5G服务</span><van-icon name="question-o" style="margin-left: 4px;color: var(--van-gray-6);"
                    @click="onClickAlert" /></h5>
                <p class="meter" style="margin-top: 26px;"><span></span><span>优享服务</span><span></span></p>
              </div>
            </li>
            <li>
              <div class="innerbox">
                <h5><span>来电显示</span></h5>
                <p class="meter" style="margin-top: 26px;"><span></span><span>免费</span><span></span></p>
              </div>
            </li>
            <li>
              <div class="innerbox">
                <h5><span>国内接听</span></h5>
                <p class="meter" style="margin-top: 26px;"><span></span><span>免费</span><span></span></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- ./ 我的套餐 end here-->

    <!-- 已参与优惠 -->
    <div class="mt_membersbox mb_margin_sm">
      <div class="innerbox">
        <div class="title">
          <div class="left"><i></i><span>已参与套餐优惠活动</span></div>
          <div class="right"><van-icon name="question-o" /></div>
        </div>
        <ul class="info_group">
          <li>
            <div class="info_cell">
              <h6>全球通5G全家享-99元套餐目标客户入网优惠（22年Q）</h6>
              <p>到期时间：2023-09-23 23:59:59</p>
            </div>
          </li>
          <li>
            <div class="info_cell">
              <h6>行政行单（叠加-4）</h6>
              <p>到期时间：2023-09-23 23:59:59</p>
            </div>
          </li>
          <li>
            <div class="info_cell">
              <h6>国内语音叠加包（150分钟）</h6>
              <p>到期时间：2023-09-23 23:59:59</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- ./ 已参与优惠 end here-->
  </div>
</template>

<script>
import { ref } from 'vue';
import { Toast, Divider, Dialog } from 'vant';
import 'vant/es/toast/style';
import 'vant/es/dialog/style';

export default {
  setup() {
    const onClickLeft = () => history.back();
    const onClickRight = () => Toast('查看更多');
    const onClickAlert = () => {
      Dialog.alert({
        title: '5G服务',
        message: '5G服务说明5G服务说明5G服务说明5G服务说明5G服务说明5G服务说明5G服务说明5G服务说明5G服务说明5G服务说明5G服务说明5G服务说明5G服务说明',
      }).then(() => {
        // on close
      });
    };

    return {
      onClickLeft,
      onClickRight,
      onClickAlert,
    }
  },

};

</script>

<style lang="less">
.mb-vfp-setmeal {
  padding-top: 46px;
  padding-bottom: 64px;
  background: #BADFEA;
}

/* 导航条 */
.mb_nav_barbox {
  position: fixed;
  top: 0;
  height: auto;
  width: 100%;
  clear: both;
}

/* ./ 导航条 end here */

/* 我的套餐 */
.mt_setmeal_box {
  background: linear-gradient(to bottom, #498FFC, #BADFEA);
  -webkit-box-pack: start;
  padding: 0 var(--van-padding-sm) var(--van-padding-sm) var(--van-padding-sm);
  overflow: hidden;

  .tel_num {
    margin: 12px 0 12px 0;
    font-size: var(--van-font-size-md);
    color: white;

    span {
      font-size: var(--van-line-height-sm);
      font-weight: bold;
    }
  }

  .setmeal_box {
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--van-border-radius-lg);

    .van-divider {
      margin: 0;
      border-color: var(--van-gray-5);
    }

    .title {
      padding: var(--van-padding-xs) var(--van-padding-sm);
      clear: both;
      overflow: hidden;

      .left {
        line-height: 24px;
        float: left;
        line-height: var(--van-line-height-lg);

        i {
          content: "";
          display: inline-block;
          width: 4px;
          height: 16px;
          background: var(--van-blue);
          vertical-align: middle;
          margin-right: 8px;
        }

        span {
          color: var(--van-gray-8);
          font-size: var(--van-font-size-md);
          vertical-align: middle;
          display: inline-block;
        }
      }

      .right {
        color: var(--van-gray-8);
        font-size: var(--van-font-size-md);
        line-height: 24px;
        float: right;
        line-height: var(--van-line-height-lg);

        span:nth-child(2) {
          font-size: var(--van-line-height-sm);
          font-weight: bold;
        }
      }
    }

    .combo {
      display: flex;
      padding: var(--van-padding-xs) var(--van-padding-sm);

      .left {
        flex: 5;
        line-height: var(--van-line-height-lg);

        h6 {
          font-size: var(--van-font-size-md);
          margin: 0;
        }
      }

      .right {
        flex: 2;
        text-align: right;
        color: var(--van-blue);
        display: flex;
        justify-content: right;
        align-items: center;
        line-height: var(--van-line-height-lg);

        .txt {
          font-size: var(--van-font-size-sm);
          margin-right: 2px;
        }
      }
    }

    .infobox ul::-webkit-scrollbar {
      display: none;
    }

    .infobox {
      padding: 0 var(--van-padding-xs);
      padding-bottom: 10px;
      position: relative;
      text-align: center;
      margin-top: var(--van-padding-xs);

      ul {
        overflow-x: auto;
        overflow-y: hidden;
        display: -webkit-box;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;

        li {
          width: 112px;
          position: relative;
          display: block;
          margin-right: var(--van-padding-xs);

          .innerbox {
            border-radius: var(--van-border-radius-lg);
            background: white;
            min-height: 132px;

            h5 {
              margin: 0;
              font-size: var(--van-font-size-md);
              text-align: center;
              padding: var(--van-padding-sm) 0;
              border-bottom: var(--van-gray-2) 1px solid;

              i {
                color: var(--van-blue);
                margin-right: var(--van-padding-base);
              }

              span {
                color: var(--van-gray-8);
                font-weight: bold;
              }
            }

            .meter {
              font-size: var(--van-font-size-sm);
              color: var(--van-gray-8);
              text-align: center;
              margin: 12px 0 0 0;
              position: relative;
              vertical-align: middle;

              span {
                vertical-align: middle;
              }

              span:nth-child(1) {
                color: var(--van-gray-6);
              }

              span:nth-child(2) {
                font-size: var(--van-line-height-sm);
                font-weight: bold;
              }

              .iconfont {
                margin-left: 4px;
                font-size: 12px;
                vertical-align: middle;
              }

              .van-badge {
                transform: scale(0.8);
                position: absolute;
                top: 0;
                right: 0;
              }
            }

            .tips {
              font-size: 12px;
              transform: scale(0.9);
              text-align: center;
              margin: 0 0 0 0;
            }

            .van-button {
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
}

/* ./ 我的套餐 end here */

/* 已参与优惠 */
.mt_membersbox {

  .innerbox {
    background: white;
    border-radius: 8px;

    .title {
      padding: var(--van-padding-xs) var(--van-padding-sm);
      clear: both;
      overflow: hidden;

      .left {
        line-height: 24px;
        float: left;
        line-height: var(--van-line-height-lg);

        i {
          content: "";
          display: inline-block;
          width: 4px;
          height: 16px;
          background: var(--van-blue);
          vertical-align: middle;
          margin-right: 8px;
        }

        span {
          color: var(--van-gray-8);
          font-size: var(--van-font-size-lg);
          font-weight: bold;
          vertical-align: middle;
          display: inline-block;
        }
      }

      .right {
        float: right;
        line-height: var(--van-line-height-lg);
      }
    }

    .info_group {
      li {
        padding: 0 var(--van-padding-md);
        .info_cell {
          padding: var(--van-padding-sm) 0;
          border-bottom: var(--van-gray-3) 1px solid;
          h6 {
            font-size: var(--van-font-size-md);
            margin: 0 0 0 0 ;
            color: var(--van-gray-8);
            font-weight: normal;
          }

          p {
            font-size: var(--van-font-size-sm);
            margin: 4px 0 0 0 ;
            color: var(--van-gray-6);
          }

        }
      }
      li:last-child{
        border-bottom: none;
      }
    }
  }
}

/* ./ 已参与优惠 end here */

/* xxx */

/* ./ xxx end here */
</style>